import React,  { Component } from 'react';
import axios from 'axios';
import cookie from 'react-cookies';
import MenuHead from '../comm/menuHead';
import Table from '../comm/table';

class Food extends Component {
    state = {
        head: [
            {en: 'food_name', ch: '食物名'},
            {en: 'food_composition', ch: '成份'},
        ],
        data: [],
        record_count: 0,
        restart_query: false,
        food_name: "",
    }
    queryFoodTypeDetail = (from, page, food_name) => {
      let userName = cookie.load('login-name');
      let loginID = cookie.load('login-id');
      axios.post("/app/queryFoodTypeDetail", {
          "name": food_name,
          "from": from,
          "page": page,
          "username": userName,
          "loginID": loginID,
      }).then((res) => {
          if("请先登录" === res.data.errorInfo) {
              this.props.history.push('/login');
          } else if("" !== res.data.errorInfo) {
              console.log(res.data.errorInfo)
          }
          this.setState({
              data: res.data.foodList,
              record_count: res.data.count,
              restart_query: false,
          })
      }).catch((err) => {
          this.setState({error: "请求服务器端时产生的错误信息: " + err})
      })
    }
    queryData = (from, page) => {
        this.queryFoodTypeDetail(from, page, "")
    }
    set_food_name = (e) => {
        this.setState({
            food_name: e.target.value,
        })
    }
    add_food_type = () => {
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        axios.post("/app/addFoodType", {
            "name": this.state.food_name,
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.errorInfo) {
                this.props.history.push('/login');
            } else if("" !== res.data.errorInfo) {
                console.log(res.data.errorInfo)
            }
            this.setState({
                food_name: "",
            })
            setTimeout(() => {
                this.queryData(0, 10)
              }, 1000)
        }).catch((err) => {
            this.setState({error: "请求服务器端时产生的错误信息: " + err})
        })
    }
    componentDidMount() {
        this.queryData(0, 10)
    }
    render() {
        return (
            <div align="center">
            <MenuHead/>
            <h4>添加食物类型</h4>
            <table>
            <tbody>
            <tr>
            <td>
            <input
                onChange={this.set_food_name}
                value={this.state.food_name}
                type="text" size="20" maxLength="20"></input>
            </td>
            <td>
            <button onClick={this.add_food_type}>添加食物类型</button>
            </td>
            </tr>
            </tbody>
            </table>
            <Table
                head={this.state.head}
                data={this.state.data}
                queryData={this.queryData}
                recordCount={this.state.record_count}
                restartQuery = {this.state.restart_query} />
            </div>
        )
    }
}

export default Food;
